<template>
  <div class="box">
    <header>
      <h5 class="tit">{{newsobj.title}}</h5>
      <div class="spanright">
        <span class="fl">发表时间：{{newsobj.add_time|dateformat('YYYY-MM-DD')}}</span>
        <span class="fr">点击：{{newsobj.click}}</span>
      </div>
    </header>
    <main v-html="newsobj.content"></main>
     <!-- 评论功能 -->
    <Comment :imgId="this.$route.params.id" :page="indexnum" @addPage="londingmore"></Comment>
  </div>
</template>
           
<script>
import Comment from "../common/Comment";

import qs from 'qs'
export default {
  components:{
    Comment
  },
  data() {
    return {
      newsobj: {},
      id: "",
      review: "",
      pinglun:{},
      indexnum:'1'

    };
  },
  methods: {
    async getnewpar() {
      // console.log(this.$route.params.id, 11111);
      if (this.$route.params.id) {
        this.id = this.$route.params.id;
        const { data: res } = await this.$http(`/api/getnew/${this.id}`);
        this.newsobj = res.message[0];
      } else {
        this.id = sessionStorage.getItem("newss");
        const { data: res } = await this.$http(`/api/getnew/${this.id}`);
        this.newsobj = res.message[0];
      }
      // console.log(this.newsobj, 2222);
      // var id = this.$route.params.id

      //   if (this.$route.params.id.message[0]) {
      //     this.newsobj = this.$route.params.id.message[0];

      //     sessionStorage.setItem("news", this.$route.params.id.message[0]);
      //     console.log(this.newsobj);
      //   } else {
      //     this.newsobj = sessionStorage.getItem("news");
      //   }
    },
    async postreview(qq, id) {
      // console.log(qq, id, 22);
      if(qq.trim().length<=0){
        return  this.$toast('请输入内容')
      }
      const { data: res } = await this.$http.post(`api/postcomment/${id}`,qs.stringify({ content: qq.trim() })
        
      );
    this.getreview()

      // console.log(res, 456);
    },
    async getreview(){
        this.id = sessionStorage.getItem("newss");
        const {data:res} = await this.$http(`api/getcomments/${this.id}?pageindex=${this.indexnum}`)
        // console.log(res,999);
        this.pinglun=res.message
 
        // console.log(this.pinglun)
        
    },
    londingmore(){
        this.indexnum++
        this.getreview()
if(this.pinglun.length <=0){
            this.indexnum=1
            this.getreview()
            return  this.$toast('没有更多留言，为您返回至留言首页')
        }
    }
  },
  created() {
    this.getnewpar()
    this.getreview()
  },
  mounted() {}
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  padding: 0px 10px 50px 10px;
}
.tit {
  height: 17px;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  color: #226aff;
}
.spanright {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  color: #226aff;
  padding: 7px 0px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
header {
  border-bottom: 1px solid #ccc;
}
.van-cell-group {
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  margin: 5px 0;
}
.mg20 {
  margin: 20px 0;
}
.revhd {
  background-color: #ccc;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.revbd {
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}
</style>